<template>
  <el-container>
    <el-aside width="200px">
      <p class="menu-title">管理平台</p>
      <asideMenu></asideMenu>
    </el-aside>
    <el-main>
      <el-header></el-header>
      <div class="main-content" v-loading="store.routerLoading || store.apiLoading">
        <!-- tabNav导航栏 -->
        <div class="nav-tab" v-if="store.tabNavList.length > 0">
          <span v-for="item in store.tabNavList">
            <el-tag v-if="item.name" effect="dark" :type="item.path == route.path ? '' : 'info'" size="medium" closable @close="handleClose(item.path)">
              <router-link style="color: white" :to="item.path">{{ item.meta.menuName }}</router-link>
            </el-tag>
          </span>
        </div>
        <div class="content-box">
          <div class="content">
            <router-view v-slot="{ Component }">
              <transition name="fade-transform" mode="out-in">
                <div v-if="route.meta.keepAlive">
                  <keep-alive>
                    <div><component :is="Component" /></div>
                  </keep-alive>
                </div>
                <div v-else>
                  <component :is="Component" />
                </div>
              </transition>
            </router-view>
          </div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref } from "vue";
import { useRoute } from "vue-router";
import { useStore } from "../../store";
import asideMenu from "./menu.vue";
let store = useStore();
let route = useRoute();
let loading = ref(false);
const handleClose = (path) => {
  store.$patch((state) => {
    state.tabNavList = store.tabNavList.filter((x) => x.path != path);
  });
};
</script>

<style scoped lang="less">
.el-header {
  padding: 0;
  height: 50px;
  background: #1a8cef;
}
.menu-title {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin-top: 10px;
}
.el-main {
  padding: 0;
  .main-content {
    .nav-tab {
      padding: 5px;
      border: 1px solid #eee;
      span {
        margin-left: 2px;
      }
      /deep/ .el-tag__content {
      }
    }
    .content-box {
      padding: 10px;
      background: #eee;
      .content {
        background: #ffffff;
        border-radius: 2px;
        padding: 12px;
      }
    }
  }
}
/deep/ .el-menu-item-group__title {
  display: none;
}
</style>
